<template>
  <div class="container">

      <el-row id="carousel" class="m-card" style="max-width:1200px;background-color: #fff;">
        <el-col>
          <el-carousel type="card" :height="carousel_height+'px'">

            <el-carousel-item  v-for="item in carouselCard" :key="item" class="el-carousel__item">

              <img :src="item" width="100%">

            </el-carousel-item>

          </el-carousel>
        </el-col>
      </el-row>

    <h2>为你推荐</h2>
    <el-row gutter='50' class="m-card" style="max-width:1000px;">
      <el-col class="ray-card" :xs="6" :sm="6" :md="6":lg="6" :xl="6" v-for="item in rayCard" :key="item.id">
        <VueKeepRatio :ratio="9/5" width="100%">
          <img :src="item.img" class="ray-card-img"/>
        </VueKeepRatio>
        <span class="title">{{item.title}}</span>
        <span class="desc">{{item.desc}}</span>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import axios from 'axios'

var rayCard=[
  {
    id:1,
    img:'https://img-blog.csdnimg.cn/7ad5cbdb16124543bf44d74baa10dd0a.png',
    title:'李宁 惟吾Superwave Mid',
    desc:'休闲鞋以丰富街头元素，打造新颖中帮板鞋'
  },{
    id:2,
    img:'https://img-blog.csdnimg.cn/9de80ed7c0c14476b00dd4a62ce8d41c.png',
    title:'Puma Smash Platform Birch',
    desc:'厚底+中底菱形几何浮雕设计彰显精致与质感'
  },{
    id:3,
    img:'https://img-blog.csdnimg.cn/8e689d9a615645a1a30349b69a388d12.png',
    title:'Converse Chuck Taylor All Star 蜡蓝Hi',
    desc:'诞生于1917年，是Converse最经典的系列'
  },{
    id:4,
    img:'https://img-blog.csdnimg.cn/be88fe6dcc1842138ddc131557fc0f05.png',
    title:'李宁 驭帅15',
    desc:'搭载李宁云、全掌beng科技, PROBAR LOC 足弓稳定装置,为你的启动注入更多能量。'
  },{
    id:5,
    img:'https://img-blog.csdnimg.cn/48a14f39fa0948e7a2bd676f8d87b810.png',
    title:'李宁 绝影CRC 跑鞋',
    desc:'中底上层搭载的LightFoam科技与下层的beng科技相辅相成提供舒适的脚感，镂空处的设计则在保证轻量化的同时增添了稳定性'
  },{
    id:6,
    img:'https://img-blog.csdnimg.cn/dc3b1d8b564a40b8993361aebd23b552.png',
    title:'李宁 绝影Essential beng跑鞋',
    desc:'入门跑步者推荐，简版绝影，beng缓震+弓结构，脚感回馈出众'
  },{
    id:7,
    img:'https://img-blog.csdnimg.cn/8c97496b0c2f4dc28c405a6d584ab25a.png',
    title:'李宁 一体织减震回弹休闲鞋',
    desc:'采用李宁云科技，有效阻挡着地冲击力'
  },{
    id:8,
    img:'https://img-blog.csdnimg.cn/b95e13cf476e46d993d9920b2c02165f.png',
    title:'李宁 韦德之道 幻影3',
    desc:'沿袭韦德之道9设计语言，全掌李宁云+后掌beng轻弹科技，颜值出众的团队鞋靴'
  }
]

  export default {
    data() {
      return {
        carousel_height: 340,
        rayCard:rayCard,
        carouselCard:['https://img-blog.csdnimg.cn/34bc288ea4344a3eaa6c016fb09616d6.png',
        'https://img-blog.csdnimg.cn/4d29d7a210f84f948ec3a983946de602.png',
        'https://img-blog.csdnimg.cn/bc6b98b4addc4a4c8a6e2641702f2fc8.png',
        'https://img-blog.csdnimg.cn/52e0394c565b474a8f68c21eb208bb1b.png',
        'https://img-blog.csdnimg.cn/3ec0658a38e14516a118aac4e7329d05.png']
      }
    },
    created() {
      window.onresize = () => {
        return (() => {
          var carousel = document.getElementById("carousel");
          this.$data.carousel_height = carousel.offsetWidth / 16.0 * 4.5;
        })();
      };

      console.log("start")
      axios.post('/test',{
        headers:{
          'Content-Type': 'application/json'
        }
      }).then(res=>{
        console.log("session",res);
      })
      .catch(error=>{
        console.log("error: "+error);
      })
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          var carousel = document.getElementById("carousel");
          this.$data.carousel_height = carousel.offsetWidth / 16.0 * 4.5;
        })();
      };
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    padding: 30px;
    align-items: center;
    background-color: #f0f2f5;

    .el-carousel__item h3 {
      color: #475669;
      font-size: 20px;
      opacity: 0.75;
      line-height: 200px;
      text-align: center;

    }

    .el-carousel__item:nth-child(2n) {
      background-color: #fff;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #fff;
    }

    .m-card {
      border-radius: 10px;
      padding: 20px;
      width: 100%;
      margin-bottom:30px;
      background-color: #fff;
    }

    .ray-card{
      display: flex;
      flex-direction: column;
      margin-bottom: 30px;
      max-width:250px;

      .ray-card-img{
        width: 100%;
        height:auto;
        border-radius: .25rem;
        margin-bottom: 20px;
      }

      .title{
        margin-top: 20px;
        font-size: 18px;
        font-weight: 600;
      }

      .desc{
        margin-top: 20px;
      }
    }

    .g-main{

      .title{
        font-size: 20px;
        font-weight: 600;
      }
      .pane{
        margin-top:10px;

        .pane-main{
          width: 100%;
          display: flex;
          align-items: center;

          .img{
            width: 60%;
            height:auto;
            border-radius: .25rem;
          }

          .pane-text{
            width:100%;
            padding:20px;
            display: flex;
            flex-direction: column;

            .title{
              font-size: 18px;
              font-weight: 600;
            }
            .desc{
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
</style>
